<template>
  <div class="nav-box">
    <div class="wid-1200">
      <div class="logo-box">
        <router-link to="/">
          <h1>温榆河公园</h1>
        <img src="@/assets/images/logo.png" alt />
        </router-link>
      </div>
      <ul>
        <li v-for="(list,index) in navList" :key="index" :class="{'active':isActive==index}">
          <router-link :to="list.router">
            {{list.name}}
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    isActive: Number
  },
  data() {
    return {
      navList: [
        { name: "首页", router: "/" },
        // { name: "景区资讯", router: "/advisory" },
        // { name: "图说景区", router: "/picture" },
        // { name: "景区活动", router: "/activity" },
        // { name: "互动专区", router: "/interactive" },
        // { name: "景区百科", router: "" },
        // { name: "客流提示及交通服务",router: "/flowTraffic"},
        { name: "景区资讯", router: "" },
        { name: "图说景区", router: "" },
        { name: "景区活动", router: "" },
        { name: "互动专区", router: "" },
        { name: "景区百科", router: "" },
        {
          name: "客流提示及交通服务",
          router: ""
        },
        { name: "网上虚拟游园", router: "" }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/basis";
.nav-box {
  position: sticky;
  top: 0;
  left: 0;
  height: 86px;
  width: 100%;
  background-color: #fff;
  line-height: 86px;
  z-index: 100;
  .wid-1200 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo-box {
    width: 126px;
    >a{
      position: relative;
      display: block;
      height:86px;

      >h1{
        position: absolute;
        top:0;
        left:0;
        font-size: 0;
        z-index: -100;
      }
      >img{
        position: absolute;
        top:50%;
        left:0;
        transform: translateY(-50%);
      }
    }
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    li {
        position: relative;
      > a {
        padding: 0 28px;
        display: block;
        font-size: 14px;
        color: #333333;
        font-weight: bold;
        &:hover {
          color: $colorEarth;
        }
       
      }
      &.active {
        background-color: $colorEarth;
        > a {
          color: #fff;
          &:hover {
            color: #fff;
          }
        }
      }
      
    }
  }
}
</style>
